<!-- 会员经验值弹窗 -->
<template>
  <view class="member_expbox" catchtouchmove="catchtouchmove">
    <view class="member_exp" :class="'member_exp_v'+memberLevel">
      <view class="close_btn" @click.stop="handleCloseMemberExp">
        <image :src="closeBtnImg"></image>
      </view>
      <image class="top_line" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/cart/exp_line_icon.png"></image>
      <view class="text_inner">
        <view class="line_text">
          <block v-if="memberLevel != 1">
            <text class="name">当前等级有效期至：</text>
            <text
              v-if="memberDetails.c_dateLevelReset_next">{{ `${new Date(memberDetails.c_dateLevelReset_next).getFullYear()}-${new Date(memberDetails.c_dateLevelReset_next).getMonth() + 1}-${new Date(memberDetails.c_dateLevelReset_next).getDate()}` }}</text>
            <text v-else class="value">无</text>
          </block>
          <block v-else>
            <text class="name">当前等级长期有效</text>
            <text class="value"></text>
          </block>
        </view>
        <view class="line_text" v-if="memberLevel != 1" :class="memberLevel == 3 ? 'margin_bottom48' :''">
          <text class="name">有效期前，保级需再累积经验值：</text>
          <text class="value">{{memberDetails.c_keep_level_amount || "无"}}</text>
        </view>
        <view class="line_text margin_bottom48" v-if="memberLevel != 3">
          <text class="name">升级需再累积经验值：</text>
          <text class="value">{{memberDetails.upgradeLeft || "无"}}</text>
        </view>
        <view class="line_text">
          <text class="name">近12个月累积有效经验值：</text>
          <text class="value">{{memberDetails.c_exp_12M || "无"}}</text>
        </view>
        <view class="line_text">
          未来30天内：
        </view>
        <view class="line_text">
          <text class="name name_lists">&nbsp;&nbsp;&nbsp;累计失效经验值</text>
          <text class="value">{{memberDetails.c_expired_exp_30days || "无"}}</text>
        </view>
        <view class="line_text">
          <text class="name name_lists">&nbsp;&nbsp;&nbsp;首笔失效经验值</text>
          <text class="value">{{memberDetails.c_first_expired_exp_30days || "无"}}</text>
        </view>
        <view class="line_text">
          <text class="name name_lists">&nbsp;&nbsp;&nbsp;首笔经验值失效时间</text>
          <text class="value">{{memberDetails.c_first_expired_exp_30days_date || "无"}}</text>
        </view>
      </view>
      <view class="exp_tips" v-if="memberLevel != 3">*会员升级<text>以近12个月累积有效经验值</text>达下一等级门槛为准</view>
      <view class="look_expbtn" @click.stop="handleExpDetails">查看经验值</view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      memberDetails: {
        type: Object,
      },
      memberLevel: {
        type: Number,
      },
    },
    data() {
      return {
        closeBtnImg: ""
      };
    },
    mounted() {
      const { closeBtnSvgImg } = require("./imgs.svg.js");
      this.closeBtnImg = closeBtnSvgImg();
    },
    methods: {
      //  阻止弹窗滑动事件穿透底部
      catchtouchmove() {},
      //  关闭弹窗
      handleCloseMemberExp() {
        this.$emit("memberExp", false);
        this.$commonSensors.lithaTrack.cTrack('PopupClick',{popup_type:"会员",popup_name:"会员经验值弹窗",button_name:"关闭" });
      },
      handleExpDetails() {
        this.$commonSensors.lithaTrack.cTrack('PopupClick',{popup_type:"会员",popup_name:"会员经验值弹窗",button_name:"查看经验值" });
        uni.navigateTo({
          url: "/pages/customer/memberRules?tab=2"
        })
        this.handleCloseMemberExp()
      }
    },
  };
</script>

<style lang="less" scoped>
  .member_expbox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.8);

    .member_exp_v1 {
      height: 868rpx;
      margin-top: -434rpx;
    }

    .member_exp_v2 {
      height: 916rpx;
      margin-top: -458rpx;
    }

    .member_exp_v3 {
      height: 828rpx;
      margin-top: -414rpx;
    }

    .member_exp {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 654rpx;
      z-index: 12;
      background-color: #fff;
      padding: 128rpx 64rpx 96rpx 64rpx;
      font-family: FrankNew-Regular, NotoSansSC-Regular;
      margin-left: -327rpx;
      text-align: center;

      .close_btn {
        width: 88rpx;
        height: 88rpx;
        padding: 24rpx 24rpx 0 0;
        position: absolute;
        right: 0;
        top: 0;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .top_line {
        width: 181.76rpx;
        height: 20rpx;
        display: inline-block;
      }

      .text_inner {
        margin-top: 40rpx;
        margin-bottom: 80rpx;
      }

      .line_text {
        width: 100%;
        height: 48rpx;
        line-height: 48rpx;
        font-size: 28rpx;
        font-weight: normal;
        color: #757575;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .name {
          flex-shrink: 0;
        }
      }

      .exp_tips {
        font-size: 20rpx;
        font-weight: normal;
        line-height: 20rpx;
        color: #757575;
        margin-bottom: 20rpx;

        text {
          color: #000000;
        }
      }

      .look_expbtn {
        width: 526rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 48rpx 16rpx 48rpx 48rpx;
        background: #000000;
        color: #fff;
        font-size: 28rpx;
        font-weight: 500;
        font-family: NotoSansSC-Medium;
      }
    }
  }

  .margin_bottom48 {
    margin-bottom: 48rpx;
  }

  .name_lists {
    display: list-item;
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 12rpx;
  }
</style>
